<template>
  <div class="app-container">
      <div class="header">
         <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item prop="status">
               <el-tree-select
                  v-model="queryParams.serviceId"
                  :data="deptTreeData"
                  :props="{ value: 'id', label: 'label', children: 'children' }"
                  :render-after-expand="false"
                  show-checkbox
                  value-key="id"
                  check-strictly
                  placeholder="请选择服务区"
                  class="with-180"
                  @check="handleChange"
               />
            </el-form-item>
            <el-form-item prop="shopId">
               <el-select
                  v-model="queryParams.shopId"
                  placeholder="请选择店铺"
                  class="with-160"
                  clearable
               >
               <el-option
                  v-for="item in shopList"
                  :key="item.shopId"
                  :label="item.shopName"
                  :value="item.shopId"
                  />
               </el-select>
            </el-form-item>

            <el-form-item class="with-220">
               <el-date-picker
                  v-model="dateRange"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  :clearable="false"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :disabled-date="disabledDate"
                  @change="handleChangeDate"
               ></el-date-picker>
            </el-form-item>

            <el-form-item>
               <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
               <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
         </el-form>

         <div>
         <el-button
         type="primary"
         plain
         @click="handleSelect('chart')"
         :class="isShowChart ? 'is-active' : ''"
         >图表显示</el-button>
         <el-button
            type="primary"
            plain
            @click="handleSelect('table')"
            :class="!isShowChart ? 'is-active' : ''"
         >表格显示</el-button>
         </div>
      </div>
      
      <div class="echarts-wrap" v-if='isShowChart'>
         <total :statisticData="chartData1"></total>
         <attribute :statisticData2="chartData2" :statisticData3="chartData3"></attribute>
         <province :statisticData="chartData4"></province>
         <sale-sex :statisticData="chartData5"></sale-sex>
         <order-amount :statisticData="chartData6"></order-amount>
         <real-flow :statisticData="chartData7"></real-flow>
         <customer-type :statisticData="chartData8"></customer-type>
         <visitors :statisticData="chartData9"></visitors>
         <residence :statisticData="chartData10"></residence>
      </div>
      <table-data :queryParams="queryParams" ref='tableRef' v-else></table-data>
  </div>
</template>

<script setup>
import { getShopList } from "@/api/system/shop"
import { shopOperFlowStatistic } from '@/api/bigData/shop'
import { toTeamTimeSep } from '@/utils/util'
import total from "./components/total.vue";
import attribute from "./components/attribute.vue";
import realFlow from "./components/realFlow.vue";
import province from "./components/province.vue";
import saleSex from "./components/saleSex.vue";
import customerType from "./components/customerType.vue";
import visitors from "./components/visitors.vue";
import residence from "./components/residence.vue";
import orderAmount from "./components/orderAmount.vue";
import tableData from "./components/table.vue";
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance();
const dateRange = ref([]);
const tableRef = ref();
const queryParams = reactive({
    serviceId:"",
    shopId:'',
    visitDateStart:null,
    visitDateEnd:null
});
const shopList = ref([])
const chartData1 = ref({});
const chartData2 = ref({});
const chartData3 = ref({});
const chartData4 = ref([]);
const chartData5 = ref({});
const chartData6 = ref({});
const chartData7 = ref({});
const chartData8 = ref({});
const chartData9 = ref([]);
const chartData10 = ref([]);
const isShowChart = ref(true)
const getShopDataList = (isQuery = true) =>{
   getShopList({pageNum: 1,pageSize: 200,serviceId:queryParams.serviceId}).then(response => {
      if (response.code === 200) {
         shopList.value = response?.rows || [];
         queryParams.shopId  = shopList.value[0]?.shopId;
      }
      if(isQuery){
         getList();
      }
   })
}

const getList = ()=>{
  proxy.$modal.loading("正在加载服务监控数据，请稍候！");
  shopOperFlowStatistic(queryParams).then(response => {
      const data = response?.data || {};
      chartData1.value = data?.statistic1 || {};
      chartData2.value = data?.statistic2 || {};
      chartData3.value = data?.statistic3 || {};
      chartData4.value = data?.statistic4 || [];
      chartData5.value = data?.statistic5 || {};
      chartData6.value = data?.statistic6 || {};
      chartData7.value = data?.statistic7 || {};
      chartData8.value = data?.statistic8 || {};
      chartData9.value = data?.statistic9 || [];
      chartData10.value = data?.statistic10 || [];
      proxy.$modal.closeLoading();
   }).catch(() => {
      proxy.$modal.closeLoading();
   });
}

const setDefaultDate = () =>{
   dateRange.value = toTeamTimeSep(7);
   queryParams.visitDateStart = dateRange.value[0];
   queryParams.visitDateEnd = dateRange.value[1];
   queryParams.serviceId  = deptTreeData.value[0]?.children[0]?.id;
   queryParams.shopId  = shopList.value[0]?.shopId;
}
const handleChangeDate = (item) => {
  if (item) {
    queryParams.visitDateStart = item[0];
    queryParams.visitDateEnd = item[1];
  } else {
    queryParams.visitDateStart = "";
    queryParams.visitDateEnd = "";
  }
}

//选择服务区
const handleChange = (item,node) =>{
   queryParams.shopId  = "";
   queryParams.serviceId = item.id;
   getShopDataList(false);
}

const deptTreeData = computed(()=>{
   return useUserStore().deptTreeData
})

const resetQuery = ()=> {
   proxy.resetForm("queryRef");
   setDefaultDate()
   handleQuery();
}

const handleQuery = ()=>{
   if(isShowChart.value){
      getList();
   }
   else{
      tableRef.value.getList()
   }
}

const handleSelect = (type) => {
   isShowChart.value = type === "chart" ? true : false;
   if(type === "chart") {
      getList()
   }
}
const disabledDate = (time) =>{
   return time.getTime() > Date.now();
}
setDefaultDate();
getShopDataList();
</script>
<style lang="scss" scoped>
  .app-container{
   .header{
      display: flex;
      justify-content: space-between;
      .el-form{
         flex:1
      }
   }
   .echarts-wrap{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      .el-empty{
        height: 100%;
      }
   }
   .is-active{
      background-color: var(--el-button-active-bg-color);
   }
   .el-button:active{
      background: var(--el-color-primary-light-9);
   }
  }
  
</style>
